<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>简单的响应式网页</title>
<style>
*{
    box-sizing:border-box;
}
.header{
    border:1px solid red;
    padding:15px;
}
.menu{
    width:25%;
    float:left;
    padding:15px;
    border:1px solid red;
}
.main{
    width:75%;
    float:left;
    padding:15px;
    border:1px solid red;
}
</style>
</head>
<body>
<div class="header">
    <h1>页头</h1>
</div>
<div class="menu">
    <ul>
        <li>菜单 1</li>
        <li>菜单 2</li>
        <li>菜单 3</li>
        <li>菜单 4</li>
    </ul>
</div>
<div class="main">
    <h2>内容</h2>
    <p>响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
    <p>响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。</p>
</div>
<div class="menu">
    <ul>
        <li>菜单 1</li>
        <li>菜单 2</li>
        <li>菜单 3</li>
        <li>菜单 4</li>
    </ul>
</div>
<div class="main">
    <h2>内容</h2>
    <p>响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。</p>
    <p>响应式网格视图通常是 12 列，宽度为 100%，在浏览器窗口大小调整时会自动伸缩。</p>
</div>
</body>
</html>